<template>
    <div class="FolderDetail">
        <h3>全部用户列表</h3>

        <el-checkbox-group v-model="newValue">
            <el-checkbox v-for="user in allUser" :disabled="user.userId == ownerUser" :label="user.userId"
                :key="user.id">
                <img :src="user.avaterStr" alt="">
                <span class="username">{{user.nickname}}</span>
            </el-checkbox>
        </el-checkbox-group>

        <el-button @click="getValue">提交</el-button>

    </div>
</template>
<script>
    import { mapState } from 'vuex'

    export default {
        props: ['closeEvent', 'ownerUser'],
        data() {
            return {
                newValue: [],
                oldValue: [],
                allUser: [
                    { userId: 1, nickname: 'DevSpeed', avater: require('../assets/user/001.png') },
                    { userId: 2, nickname: 'DevSpeed1', avater: require('../assets/user/002.png') },
                    { userId: 3, nickname: 'DevSpeed2', avater: require('../assets/user/003.png') },
                ],
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        async mounted() {
            // getProjectUserEditData
            if (this.ClientApi) {
                var projectId = _$Events.config.winConfig.projectId;

                var EditUserData = await this.ClientApi.project.getProjectUserEditData(projectId);
                if (EditUserData.type == 'success') {

                    for (let i = 0; i < EditUserData.res.user.length; i++) {
                        const element = EditUserData.res.user[i];
                        element.avaterStr = require('../assets/user/' + element.avater);
                    };
                    this.allUser = EditUserData.res.user;
                    for (let i = 0; i < EditUserData.res.relevance.length; i++) {
                        const element = EditUserData.res.relevance[i];
                        this.newValue.push(element.userId);
                        this.oldValue.push(element.userId);
                    };

                } else {
                    this.$message({
                        message: '获取用户信息失败',
                        type: 'warning'
                    });
                };
            };
        },
        methods: {
            getValue() {
                var deleteUsers = [];
                var addUsers = [];
                for (let i = 0; i < this.oldValue.length; i++) {
                    const oldValueItem = this.oldValue[i];
                    var inArray = false;
                    for (let i = 0; i < this.newValue.length; i++) {
                        const newValueItem = this.newValue[i];
                        if (oldValueItem == newValueItem) {
                            inArray = true;
                            break;
                        };
                    };
                    if (!inArray) {
                        deleteUsers.push(oldValueItem);
                    };
                };

                for (let i = 0; i < this.newValue.length; i++) {
                    const newValueItem = this.newValue[i];
                    var inArray = false;
                    for (let i = 0; i < this.oldValue.length; i++) {
                        const oldValueItem = this.oldValue[i];
                        if (oldValueItem == newValueItem) {
                            inArray = true;
                            break;
                        };
                    };
                    if (!inArray) {
                        addUsers.push(newValueItem);
                    };
                };

                console.log('addUser : ', addUsers);
                console.log('deleteUsers : ', deleteUsers);

                this.closeEvent('projectUserUpdate');
            },

        },
    }
</script>

<style scoped>
    .FolderDetail {
        width: 90%;
        margin: 20px auto;
    }

    .el-checkbox {
        display: block;
        padding: 10px 0;
    }

    .username {
        font-size: 16px;
    }

    .el-checkbox img {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
        margin: 0 10px 0 0;
    }
</style>